<template>
  <div>
    <!--搜索-->
    <el-row :gutter="20">
      <!--el-col :span="8">
        <el-input placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary">搜索</el-button>
      </el-col-->
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/stuhome' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>课程</el-breadcrumb-item>
          <el-breadcrumb-item>所有课程</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-main>
        <template>
          <!--SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
          <books class="books-area" ref="booksArea"></books-->
          <el-tooltip effect="dark" placement="right" v-for="item in courses" :key="item.courseid">
            <p slot="content" style="font-size: 14px;margin-bottom: 6px;">{{item.courseName}}</p>
            <p slot="content" style="width: 300px" class="abstract">{{item.synopsis}}</p>
            <el-card
              style="width: 177px;margin-bottom: 20px;height: 265px;float: left;margin-right: 50px"
              class="book"
              bodyStyle="padding:10px"
              shadow="hover"
            >
              <div class="cover" style="width: 155px;">
                <img :src="item.img" alt="封面" />
              </div>
              <div class="info">
                <div class="title">
                  <a>{{item.courseName}}</a>
                  <div class="author">{{"老师："+item.courseTeacher}}</div>
                </div>
                <el-tag type="danger" effect="plain">{{item.coursetime}}学时</el-tag>
              </div>
              <div class="twobutton">
                <el-button
                  type="danger"
                  round
                  size="mini"
                  @click="selectone(item.courseid), dialogFormVisible = true"
                >加入课程</el-button>
              </div>
              <!--div class="author">{{item.author}}</div-->
            </el-card>
          </el-tooltip>
          <!--加入对话框-->
          <el-dialog title="提示" :visible.sync="dialogFormVisible" width="30%">
            <!--span>是否确认加入课程</span-->
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="toadd(course.data.courseTeacher,course.data.courseName,course.data.colloge,course.data.courseid, course.data.teacherid, course.data.img), dialogFormVisible = false">确 定</el-button>
          </el-dialog>
        </template>
      </el-main>
    </el-row>
  </div>
</template>

<script>
import { getStore } from "../../libs/storage";
export default {
  data() {
    return {
      // 查询参数
      booksinfo: {
        userid: getStore("userid"),
        bookid: ""
      },
      courses: [],
      course: [],
      cid: "",
      dialogFormVisible: false
    };
  },
  created() {
    this.listByCategory();
  },
  methods: {
    //加入课程
    toadd(courseTeacher,courseName,colloge,courseid,teacherid,img) {
    
      //alert(id);
      this.$axios
        .post("/toadd", {
          studentid: getStore("stuid"),
          colloge: colloge,
          teacherid: teacherid,
          courseid: courseid,
          courseName: courseName,
          courseTeacher: courseTeacher,
          img: img
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            //this.books = resp.data;console.log(this.books.id);
            console.log(resp.data);
            return this.$message.success("加入成功");
          }
        })
        .catch(failResponse => {
          console.log(id);
          console.log(failResponse.responseResult);
          console.log(getStore("userid"));
        });
    },
    //收藏
    collect(id) {
      //alert(id);
      this.$axios
        .post("/collect", {
          userid: getStore("userid"),
          bookid: id
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            //this.books = resp.data;console.log(this.books.id);
            return this.$message.success("收藏成功");
          }
        })
        .catch(failResponse => {
          console.log(id);
          console.log(failResponse.responseResult);
          console.log(getStore("userid"));
        });
    },
    //单个查询
    selectone(id) {
      //alert(id);
      this.$axios
        .post("/selectone", {
          courseid: id
        })
        .then(resp => {
          if (resp && resp.data.code === 200) {
            this.course = resp.data;
            console.log(this.course);
            console.log(this.course.data.courseid);
            console.log(this.course.data.teacherid);
            console.log(this.course.data.colloge);
            console.log(this.course.data.courseName);
            console.log(this.course.data.courseTeacher);
            console.log(this.course.data.img);
            console.log(getStore("userid"));
            return this.$message.success("查询成功");
          }
        })
        .catch(failResponse => {
          console.log(getStore("userid"));
          console.log(id);
          console.log(failResponse.responseResult);
          return this.$message.info("查询失败");
        });
    },
    //查询所有
    listByCategory() {
      //alert(1);
      this.$axios
        .post("/aplication", {
          status: "1"
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            this.courses = resp.data;
            console.log(resp);
            return;
          }
        })
        .catch(failResponse => {
          console.log(getStore("userid"));
          console.log(failResponse.responseResult);
        });
    }
  }
};
</script>

<style scoped>
.cover {
  width: 115px;
  height: 172px;
  margin-bottom: 7px;
  overflow: hidden;
  cursor: pointer;
}

img {
  width: 140px;
  height: 175px;
  /*margin: 0 auto;*/
}

.title {
  font-size: 14px;
  text-align: left;
}

.author {
  color: #333;
  width: 102px;
  font-size: 13px;
  margin-bottom: 6px;
  text-align: left;
}

.abstract {
  display: block;
  line-height: 17px;
}

a {
  text-decoration: none;
}

a:link,
a:visited,
a:focus {
  color: #3377aa;
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.twobutton {
  align-items: center;
}
</style>>